<!DOCTYPE html>
<html>
<head>
  <title></title>
  <#include "/header.html">

</head>
<body>
<div id="rrapp" v-cloak>
  <div v-show="showList">
    <div class="grid-btn">
      <div class="form-group col-sm-2">
        <el-input v-model="q.filename" size="small" @keyup.enter="query(true)" placeholder="模板名称" clearable></el-input>
      </div>
      <a class="btn btn-default btn-sm" @click="query"><i class="fa fa-search"></i> 查询</a>
      <a class="btn btn-primary btn-sm" @click="add">
        <i class="fa fa-plus"></i>
        &nbsp;新增
      </a>
    <a class="btn btn-primary btn-sm" @click="update">
      <i class="fa fa-pencil-square-o"></i>
      &nbsp;修改
    </a>
  <!--        <a class="btn btn-primary disabled btn-sm" @click="del">-->
  <!--          <i class="fa fa-trash-o"></i>-->
  <!--          &nbsp;删除-->
  <!--        </a>-->
<a class="btn btn-primary btn-sm" @click="readScripts">
  <i class="fa fa-search"></i>
  &nbsp;查看内容
</a>

<a class="btn btn-primary btn-sm" @click="editScripts">
  <i class="fa fa-file-code-o"></i>
  &nbsp;编辑内容
</a>

<a class="btn btn-warning btn-sm" style="float:right;" @click="goScriptLog">版本信息</a>

</div>
<div style="padding: 0 10px">
  <el-table
          :data="dataPage.list"
          border
          size="small"
          height="452"
          :stripe="true"
          style="width: 100%"
          @selection-change="handleSelectionChange">
    <el-table-column
            type="selection"
            width="50">
    </el-table-column>
    <el-table-column
            label="序号"
            :formatter="colIndex"
            width="50"
            align="center">
    </el-table-column>
<!--    <el-table-column-->
<!--            prop="scriptid"-->
<!--            label="模板ID"-->
<!--            :show-overflow-tooltip="true"-->
<!--            align="center">-->
<!--    </el-table-column>-->
    <el-table-column
            prop="etlServerName"
            label="服务器名称"
            :show-overflow-tooltip="true"
            align="center">
    </el-table-column>
    <el-table-column
            prop="filename"
            label="模板名称"
            :show-overflow-tooltip="true"
            align="center">
    </el-table-column>
    <el-table-column
            prop="scripttype"
            label="模板类型"
            :show-overflow-tooltip="true"
            align="center">
    </el-table-column>
    <el-table-column
            prop="description"
            label="模板描述"
            :show-overflow-tooltip="true"
            align="center">
    </el-table-column>
    <el-table-column
            prop="enable"
            label="是否有效"
            :show-overflow-tooltip="true"
            align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.enable == 1" class="table-label-gb label-success">有效模板</span>
        <span v-else-if="scope.row.enable == 0" class="table-label-gb label-default">无效模板</span>
        <span v-else="" class="table-label-gb label-default">未知状态</span>
      </template>
    </el-table-column>
    <el-table-column
            prop="shareflag"
            label="是否共享"
            :show-overflow-tooltip="true"
            align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.shareflag == 1" class="table-label-gb label-success">共享</span>
        <span v-else-if="scope.row.shareflag == 0" class="table-label-gb label-default">私有</span>
        <span v-else="" class="table-label-gb label-default">未知状态</span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataPage.currPage"
          :page-size="dataPage.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataPage.totalCount">
  </el-pagination>
</div>
</div>
<div v-show="!showList" class="panel panel-default">
  <div class="panel-heading">{{title}}</div>
  <form class="form-horizontal">
    <div class="form-group" style="display: none">
      <div class="col-sm-2 control-label">模板ID</div>
      <div class="col-sm-10">
        <input type="text" class="form-control" v-model="script.scriptid" placeholder="模板ID" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label"><span style="color:red;margin-right: 4px">*</span>服务器名称</div>
      <div class="col-sm-10">
        <el-select id="etlServerSelect" size="small" style="width: 100%" v-model="script.etlServer" filterable placeholder="请选择">
          <el-option v-for="option in allServers" :value="option.code">{{ option.name }}</el-option>
        </el-select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">模板路径</div>
      <div class="col-sm-10">
        <el-input v-model="script.filepath" size="small" placeholder="模板路径" readonly></el-input>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label"><span style="color:red;margin-right: 4px">*</span>模板名称</div>
      <div class="col-sm-10">
        <!-- readonly="readonly" -->
        <el-input placeholder="模板名称" size="small" v-model="script.filename" readonly><template slot="append"><span id="upload" @click="uploadScript">导入</span></template></el-input>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">模板类型</div>
      <div class="col-sm-10">
        <el-input v-model="script.scripttype" size="small" placeholder="模板类型" readonly></el-input>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">模板描述</div>
      <div class="col-sm-10">
        <el-input v-model="script.description" size="small" placeholder="模板描述"></el-input>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">是否生效</div>
      <div class="col-sm-10">
        <el-select id="enableid" size="small" style="width: 100%" v-model="script.enable" placeholder="请选择">
          <el-option key="0" label="失效" value="0"></el-option>
          <el-option key="1" label="有效" value="1"></el-option>
        </el-select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">是否共享</div>
      <div class="col-sm-10">
        <el-select id="shareflagid" size="small" style="width: 100%" v-model="script.shareflag" placeholder="请选择">
          <el-option key="0" label="私有" value="0"></el-option>
          <el-option key="1" label="共享" value="1"></el-option>
        </el-select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label"></div>
      <input type="hidden" v-model="script.username" />
      <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定" />
      &nbsp;&nbsp;
      <input type="button" class="btn btn-warning" @click="reBack" value="返回" />
    </div>
  </form>
</div>

<el-dialog title="作业模板详情" :visible="myModal" :close-on-click-modal="false" :show-close="false">
  <textarea  ref="scriptDetail" style="width:100%;" value=""></textarea>
  <div slot="footer" class="dialog-footer">
    <a id="showSaveScript" class="btn btn-primary btn-sm" @click="saveScripts">保存模板</a>
    <a class="btn btn-default btn-sm" @click="closeScripts">关闭模板</a>
  </div>
</el-dialog>


<!-------------------------------------------------------------------------->
</div>
<!-- <script src="${request.contextPath}/statics/js/modules/etl/script.js?_${.now?long}"></script> -->
<link href="${request.contextPath}/statics/libs/codemirror/lib/codemirror.css" rel="stylesheet">
<link href="${request.contextPath}/statics/libs/codemirror/theme/dracula.css" rel="stylesheet">
<link href="${request.contextPath}/statics/libs/codemirror/addon/hint/show-hint.css" rel="stylesheet">
<script src="${request.contextPath}/statics/libs/codemirror/lib/codemirror.js"></script>
<script src="${request.contextPath}/statics/libs/codemirror/mode/clike.js"></script>
<script src="${request.contextPath}/statics/libs/codemirror/mode/perl.js"></script>
<script src="${request.contextPath}/statics/libs/codemirror/mode/shell.js"></script>
<script src="${request.contextPath}/statics/libs/codemirror/mode/sql.js"></script>
<script src="${request.contextPath}/statics/libs/codemirror/mode/python.js"></script>
<script src="${request.contextPath}/statics/js/modules/etl/script.js"></script>
</body>
</html>
